<template>
  <div class="mod-user" style="height: 500px;">
    <echarts-com ref="echartsCom" :id="opeEcharts" :option="echartsOption"></echarts-com>
  </div>
</template>

<script>
import EchartsCom from '@/components/echarts'
  export default {
    data () {
      return {
        dataInfo: {},
        gameTotal: '',
        opeEcharts: 'opeEcharts',
        echartsOption: {}
      }
    },
    components: {
      EchartsCom
    },
    methods: {
      // 获取数据
      getDataInfo (page, params) {
        this.$http({
          url: this.$http.adornUrl(`/data/admin/all`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({ data }) => {
          this.dataInfo = data.studentCountOfGame
          this.gameTotal = data.gameCount
          let xAxisData = [], seriesData = []
          this.dataInfo.forEach((val,key) => {
            xAxisData.push(val.title)
            seriesData.push(val.total)
          })
          this.echartsOption = {
            title: {
              text: '赛项数目:'+this.gameTotal,
              textStyle: {
                color: '#409EFF',
                fontSize: 22
              }
            },
            tooltip: {},
            legend: {
              data: ['人员占比']
            },
            color: ['#409EFF','#67C23A', '#E6A23C', '#F56C6C', '#909399'],
            xAxis: {
              data: xAxisData
            },
            yAxis: {},
            series: [{
              name: '人员占比',
              type: 'bar',
              data: seriesData
            }]
          }
        })
      }
    },
    mounted(){
      this.getDataInfo()
    }
  }
</script>
